<template>
  <div class="contains">
    <detail-header></detail-header>
    <detail-banner :name="name" :bannerImg="bannerImg"></detail-banner>
    <detail-main :categoryList="categoryList"></detail-main>

  </div>
</template>

<script>

  import DetailBanner from './component/DetailBanner.vue'
  import DetailHeader from './component/DetailHeader.vue'
  import DetailMain from './component/DetailMain.vue'

  import axois from 'axios'

  export default {
    name: 'Detail',
    components: {
      DetailBanner,
      DetailHeader,
      DetailMain
    },
    methods: {
      getInfo () {
        axois.get('/api/detail.json?id=').then(this.onSuccess)
      },
      onSuccess (res) {
        var response = res.data
        if (response.ret && response.data) {
          this.bannerImg = response.data.bannerImg
          this.name = response.data.sightName
          this.categoryList = response.data.categoryList
        }
      }
    },
    mounted () {
      console.log('aaa')
      this.getInfo()
    },
    data () {
      return {
        id: '',
        name: '',
        bannerImg: '',
        categoryList: []
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus" scoped>
  /*@import '~styles/varibles.styl'*/
  /*@import '~styles/mixins.styl'*/
  /*.icons >>> .swiper-container*/
</style>
